<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <link rel="icon" href="/static/images/favicon.png" type="image/x-icon"/>
    <link rel="shortcut icon" type="image/x-icon" href="/static/images/favicon.png"/>
    <!-- Generated: 2018-04-16 09:29:05 +0200 -->
    <title>Fabric Net Server - github.com/aberic/fabric-net-server</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
    <script src="/static/js/require.min.js"></script>
    <script>
        requirejs.config({
            baseUrl: '.'
        });
    </script>
    <!-- Dashboard Core -->
    <link href="/static/css/dashboard.css" rel="stylesheet"/>
    <script src="/static/js/dashboard.js"></script>
    <!-- c3.js Charts Plugin -->
    <link href="/static/plugins/charts-c3/plugin.css" rel="stylesheet"/>
    <script src="/static/plugins/charts-c3/plugin.js"></script>
    <!-- Input Mask Plugin -->
    <script src="/static/plugins/input-mask/plugin.js"></script>
</head>

<body class="">
<div class="page">
    <div class="page-main">
        <div th:include="fns_header :: header"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row row-cards">
                    <div class="col-6 col-sm-4 col-lg-3">
                        <div class="card">
                            <div class="card-body p-3 text-center">
                                <div class="text-right text-blue">
                                    <span style="font-size: 14px" th:text="#{league}"></span>
                                    <ion-icon name="planet"></ion-icon>
                                </div>
                                <div class="h1 m-0" th:text="${leagueCount}"></div>
                                <span class="text-muted mb-4" style="font-size: 12px" th:text="#{league_brief}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-lg-3">
                        <div class="card">
                            <div class="card-body p-3 text-center">
                                <div class="text-right text-cyan">
                                    <span style="font-size: 14px" th:text="#{org}"></span>
                                    <ion-icon name="people"></ion-icon>
                                </div>
                                <div class="h1 m-0" th:text="${orgCount}"></div>
                                <span class="text-muted mb-4" style="font-size: 12px" th:text="#{org_brief}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-lg-3">
                        <div class="card">
                            <div class="card-body p-3 text-center">
                                <div class="text-right text-orange">
                                    <span style="font-size: 14px" th:text="#{orderer}"></span>
                                    <ion-icon name="reorder"></ion-icon>
                                </div>
                                <div class="h1 m-0" th:text="${ordererCount}"></div>
                                <span class="text-muted mb-4" style="font-size: 12px" th:text="#{orderer_brief}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-lg-3">
                        <div class="card">
                            <div class="card-body p-3 text-center">
                                <div class="text-right text-purpleZ">
                                    <span style="font-size: 14px" th:text="#{peer}"></span>
                                    <ion-icon name="desktop"></ion-icon>
                                </div>
                                <div class="h1 m-0" th:text="${peerCount}"></div>
                                <span class="text-muted mb-4" style="font-size: 12px" th:text="#{peer_brief}"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row row-cards">
                    <div class="col-6 col-sm-4 col-lg-3">
                        <div class="card">
                            <div class="card-body p-3 text-center">
                                <div class="text-right text-blue">
                                    <span style="font-size: 14px" th:text="#{ca}"></span>
                                    <ion-icon name="contact"></ion-icon>
                                </div>
                                <div class="h1 m-0" th:text="${caCount}"></div>
                                <span class="text-muted mb-4" style="font-size: 12px" th:text="#{ca_brief}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-lg-3">
                        <div class="card">
                            <div class="card-body p-3 text-center">
                                <div class="text-right text-green">
                                    <span style="font-size: 14px" th:text="#{channel}"></span>
                                    <ion-icon name="git-commit"></ion-icon>
                                </div>
                                <div class="h1 m-0" th:text="${channelCount}"></div>
                                <span class="text-muted mb-4" style="font-size: 12px" th:text="#{channel_brief}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-lg-3">
                        <div class="card">
                            <div class="card-body p-3 text-center">
                                <div class="text-right text-yellow">
                                    <span style="font-size: 14px" th:text="#{chaincode}"></span>
                                    <ion-icon name="paper"></ion-icon>
                                </div>
                                <div class="h1 m-0" th:text="${chaincodeCount}"></div>
                                <span class="text-muted mb-4" style="font-size: 12px"
                                      th:text="#{chaincode_brief}"></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-sm-4 col-lg-3">
                        <div class="card">
                            <div class="card-body p-3 text-center">
                                <div class="text-right text-cyan">
                                    <span style="font-size: 14px" th:text="#{app}"></span>
                                    <ion-icon name="cube"></ion-icon>
                                </div>
                                <div class="h1 m-0" th:text="${appCount}"></div>
                                <span class="text-muted mb-4" style="font-size: 12px" th:text="#{app_brief}"></span>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row row-cards row-deck">
                    <div class="col-lg-6">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title" th:text="#{platform_channel_block_tx_rate}"></h3>
                            </div>
                            <div id="chart-development-activity" th:json-data="${channelBlockLists}"
                                 style="height: 10rem"></div>
                            <div class="table-responsive">
                                <!-- -->
                                <table class="table card-table table-striped table-vcenter">
                                    <thead>
                                    <tr>
                                        <th th:text="#{blockHeight}"></th>
                                        <th th:text="#{channel_name}"></th>
                                        <th th:text="#{tx_count}"></th>
                                        <th th:text="#{date}"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="blockDao : ${blockDaos}">
                                        <td th:text="${blockDao.height}">blockHeight</td>
                                        <td th:text="${blockDao.peerChannelName}">channel_name</td>
                                        <td th:text="${blockDao.txCount}">tx_count</td>
                                        <td class="text-nowrap" th:text="${blockDao.timestamp}">date</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="alert alert-primary">Are you in trouble? <a
                                href="https://github.com/aberic/fabric-net-server/wiki" class="alert-link">Read our
                            documentation</a> with code samples.
                        </div>
                        <div hidden th:percentData="${channelPercents}" id="percentData"></div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title" th:text="#{platform_channel_block_rate}"></h3>
                                    </div>
                                    <div class="card-body">
                                        <div id="chart-donut" style="height: 12rem;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title" th:text="#{platform_channel_tx_rate}"></h3>
                                    </div>
                                    <div class="card-body">
                                        <div id="chart-pie" style="height: 12rem;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <div class="h5" th:text="#{platform_block_count_today}"></div>
                                        <div class="display-4 font-weight-bold mb-4"
                                             th:text="${dayStatistics.blockCount}"></div>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-red"
                                                 th:styleappend="${'width:'+dayStatistics.blockPercent+'%'}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="card">
                                    <div class="card-body text-center">
                                        <div class="h5" th:text="#{platform_tx_count_today}"></div>
                                        <div class="display-4 font-weight-bold mb-4"
                                             th:text="${dayStatistics.txCount}"></div>
                                        <div class="progress progress-sm">
                                            <div class="progress-bar bg-green"
                                                 th:styleappend="${'width:'+dayStatistics.txPercent+'%'}"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-lg-4">
                        <div class="card p-3">
                            <div class="d-flex align-items-center">
                                <span class="stamp stamp-md bg-blue mr-3">
                                  <ion-icon name="cube"></ion-icon>
                                </span>
                                <div>
                                    <h4 class="m-0" th:text="${platform.blockCount}"></h4>
                                    <small class="text-muted" th:text="#{platform_block_count}"></small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="card p-3">
                            <div class="d-flex align-items-center">
                                <span class="stamp stamp-md bg-green mr-3">
                                  <ion-icon name="done-all"></ion-icon>
                                </span>
                                <div>
                                    <h4 class="m-0" th:text="${platform.txCount}"></h4>
                                    <small class="text-muted" th:text="#{platform_tx_count}"></small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="card p-3">
                            <div class="d-flex align-items-center">
                                <span class="stamp stamp-md bg-red mr-3">
                                  <ion-icon name="list-box"></ion-icon>
                                </span>
                                <div>
                                    <h4 class="m-0" th:text="${platform.rwSetCount}"></h4>
                                    <small class="text-muted" th:text="#{platform_rw_count}"></small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-12">
                        <div class="row">
                            <div class="col-sm-6 col-lg-4">
                                <div hidden th:dayBlockDatas="${dayBlocksJson}" id="dayBlockDatas"></div>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-value float-right text-blue" th:text="${dayBlocks.upDown}"></div>
                                        <h5 class="mb-1" th:text="#{platform_day_block_curve}"></h5>
                                        <div class="text-muted" th:text="#{platform_day_block_curve_brief}" style="font-size: 10px"></div>
                                    </div>
                                    <div class="card-chart-bg">
                                        <div id="chart-bg-users-1" style="height: 100%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <div hidden th:dayTxDatas="${dayTxsJson}" id="dayTxDatas"></div>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-value float-right text-green" th:text="${dayTxs.upDown}"></div>
                                        <h5 class="mb-1" th:text="#{platform_day_tx_curve}"></h5>
                                        <div class="text-muted" th:text="#{platform_day_tx_curve_brief}" style="font-size: 10px"></div>
                                    </div>
                                    <div class="card-chart-bg">
                                        <div id="chart-bg-users-2" style="height: 100%"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-4">
                                <div hidden th:dayRWDatas="${dayRWsJson}" id="dayRWDatas"></div>
                                <div class="card">
                                    <div class="card-body">
                                        <div class="card-value float-right text-red" th:text="${dayRWs.upDown}"></div>
                                        <h5 class="mb-1" th:text="#{platform_day_rw_curve}"></h5>
                                        <div class="text-muted" th:text="#{platform_day_rw_curve_brief}" style="font-size: 10px"></div>
                                    </div>
                                    <div class="card-chart-bg">
                                        <div id="chart-bg-users-3" style="height: 100%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title" th:text="#{blocks}"></h3>
                            </div>
                            <div class="table-responsive">
                                <table class="table card-table table-vcenter text-nowrap">
                                    <thead>
                                    <tr>
                                        <th class="w-1">No.</th>
                                        <th th:text="#{blockHeight}"></th>
                                        <th th:text="#{peerName}"></th>
                                        <th th:text="#{channel_name}"></th>
                                        <th th:text="#{calculatedBlockHash}"></th>
                                        <th th:text="#{date}"></th>
                                        <th th:text="#{block_sync_rate}"></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="block : ${blocks}">
                                        <td><span class="text-muted" th:text="${block.index}">序号</span></td>
                                        <td th:text="${block.num}">区块高度</td>
                                        <td th:text="${block.peerName}">节点名称</td>
                                        <td th:text="${block.channelName}">通道名称</td>
                                        <td th:text="${block.calculatedBlockHash}">当前hash</td>
                                        <td th:text="${block.date}">日期</td>
                                        <td class="text-center">
                                            <div class="mx-auto chart-circle chart-circle-xs"
                                                 th:data-value="${block.percent}" data-thickness="3" data-color="blue">
                                                <div class="chart-circle-value" th:text="${block.percentStr}"></div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div th:include="fns_footer :: footer"></div>
    </div>
</div>
<script src="https://unpkg.com/ionicons@4.2.4/dist/ionicons.js"></script>
<script>
    require(['c3', 'jquery'], function (c3, $) {
        $(document).ready(function () {
            //通道区块交易曲线
            initChannelTradeChart()


            var channelPercentsStr = $("#percentData").attr("percentData");
            var channelPercents = JSON.parse(channelPercentsStr);
            //区块通道比
            chart2(channelPercents)
            chart3(channelPercents)

            dayBlocks()
            dayTxs()
            dayRWs()
        });


        //    通道区块交易曲线
        var initChannelTradeChart = function () {
            var channelPercentsStr = $("#chart-development-activity").attr("json-data")
            var channelPercents = JSON.parse(channelPercentsStr);
            let array = [];

            for (let v of channelPercents) {
                let a = []
                a.push(v.name)
                for (let c of v.channelBlocks) {
                    if (c.blocks) {
                        a.push(c.blocks)
                    }
                }
                array.push(a)
            }

            var chart = c3.generate({
                bindto: '#chart-development-activity', // id of chart wrapper
                data: {
                    columns: array,
//                                [
//                            // each columns data
//                            ['data1', 0, 5, 1, 2, 7, 5, 6, 8, 24, 7, 12, 5, 6, 3, 2, 2, 6, 30, 10, 10, 15, 14, 47, 65, 55]
//                        ],
                    type: 'area', // default type of chart
                    groups: [
                        ['data1', 'data2', 'data3']
                    ],
                    colors: {
                        'data1': tabler.colors["blue"]
                    },
                    names: {
                        // name of each serie
                        'data1': 'channel1'
                    }
                },
                axis: {
                    y: {
                        padding: {
                            bottom: 0,
                        },
                        show: false,
                        tick: {
                            outer: false
                        }
                    },
                    x: {
                        padding: {
                            left: 0,
                            right: 0
                        },
                        show: false
                    }
                },
                legend: {
                    position: 'inset',
                    padding: 0,
                    inset: {
                        anchor: 'top-left',
                        x: 20,
                        y: 8,
                        step: 10
                    }
                },
                tooltip: {
                    format: {
                        title: function (x) {
                            return '';
                        }
                    }
                },
                padding: {
                    bottom: 0,
                    left: -1,
                    right: -1
                },
                point: {
                    show: false
                }
            });
        }

        var dayRWs = function () {
            var dayRWsList = $("#dayRWDatas").attr("dayRWDatas");
            var dayRWsListJson = JSON.parse(dayRWsList);

            let array = []
            let val = []
            val.push(dayRWsListJson.name)
            for (let d of dayRWsListJson.integers) {
                val.push(d)
            }
            array.push(val)
            var chart = c3.generate({
                bindto: '#chart-bg-users-3',
                padding: {
                    bottom: -10,
                    left: -1,
                    right: -1
                },
                data: {
                    names: {
                        data1: dayRWsListJson.name
                    },
                    columns: array,
                    type: 'area'
                },
                legend: {
                    show: false
                },
                transition: {
                    duration: 0
                },
                point: {
                    show: false
                },
                tooltip: {
                    format: {
                        title: function (x) {
                            return '';
                        }
                    }
                },
                axis: {
                    y: {
                        padding: {
                            bottom: 0,
                        },
                        show: false,
                        tick: {
                            outer: false
                        }
                    },
                    x: {
                        padding: {
                            left: 0,
                            right: 0
                        },
                        show: false
                    }
                },
                color: {
                    pattern: ['#e74c3c']
                }
            });
        }

        var dayTxs = function () {
            var dayTxsList = $("#dayTxDatas").attr("dayTxDatas");
            var dayTxsListJson = JSON.parse(dayTxsList);

            let array = []
            let val = []
            val.push(dayTxsListJson.name)
            for (let d of dayTxsListJson.integers) {
                val.push(d)
            }
            array.push(val)

            var chart = c3.generate({
                bindto: '#chart-bg-users-2',
                padding: {
                    bottom: -10,
                    left: -1,
                    right: -1
                },
                data: {
                    names: {
                        data1: dayTxsListJson.name
                    },
                    columns: array,
                    type: 'area'
                },
                legend: {
                    show: false
                },
                transition: {
                    duration: 0
                },
                point: {
                    show: false
                },
                tooltip: {
                    format: {
                        title: function (x) {
                            return '';
                        }
                    }
                },
                axis: {
                    y: {
                        padding: {
                            bottom: 0,
                        },
                        show: false,
                        tick: {
                            outer: false
                        }
                    },
                    x: {
                        padding: {
                            left: 0,
                            right: 0
                        },
                        show: false
                    }
                },
                color: {
                    pattern: ['#5eba00']
                }
            });
        }

        // 日区块曲线
        var dayBlocks = function () {
            var dayBlockList = $("#dayBlockDatas").attr("dayBlockDatas");
            var dayBlockListJson = JSON.parse(dayBlockList);

            let array = []
            let val = []
            val.push(dayBlockListJson.name)
            for (let d of dayBlockListJson.integers) {
                val.push(d)
            }
            array.push(val)

            var chart = c3.generate({
                bindto: '#chart-bg-users-1',
                padding: {
                    bottom: -10,
                    left: -1,
                    right: -1
                },
                data: {
                    names: {
                        data1: dayBlockListJson.name
                    },
                    columns: array,
                    type: 'area'
                },
                legend: {
                    show: false
                },
                transition: {
                    duration: 0
                },
                point: {
                    show: false
                },
                tooltip: {
                    format: {
                        title: function (x) {
                            return '';
                        }
                    }
                },
                axis: {
                    y: {
                        padding: {
                            bottom: 0,
                        },
                        show: false,
                        tick: {
                            outer: false
                        }
                    },
                    x: {
                        padding: {
                            left: 0,
                            right: 0
                        },
                        show: false
                    }
                },
                color: {
                    pattern: ['#467fcf']
                }
            });
        }

        // 通道区块比
        var chart2 = function (data) {
            let array = []
            for (let c of data) {
                let val = []
                val.push(c.name)
                val.push(c.blockPercent)
                array.push(val)
            }

            var chart = c3.generate({
                bindto: '#chart-donut', // id of chart wrapper
                data: {
                    columns: array,
                    type: 'donut', // default type of chart
                    colors: {
                        'data1': tabler.colors["green"],
                        'data2': tabler.colors["green-light"]
                    },
                    names: {
                        // name of each serie
                        'data1': 'Maximum',
                        'data2': 'Minimum'
                    }
                },
                axis: {},
                legend: {
                    show: false, //hide legend
                },
                padding: {
                    bottom: 0,
                    top: 0
                },
            });
        }


        //通道交易比
        var chart3 = function (data) {
            let array = []
            for (let c of data) {
                let val = []
                val.push(c.name)
                val.push(c.txPercent)
                array.push(val)
            }

            var chart = c3.generate({
                bindto: '#chart-pie', // id of chart wrapper
                data: {
                    columns: array,
                    type: 'pie', // default type of chart
                    colors: {
                        'data1': tabler.colors["blue-darker"],
                        'data2': tabler.colors["blue"],
                        'data3': tabler.colors["blue-light"],
                        'data4': tabler.colors["blue-lighter"]
                    },
                    names: {
                        // name of each serie
                        'data1': 'A',
                        'data2': 'B',
                        'data3': 'C',
                        'data4': 'D'
                    }
                },
                axis: {},
                legend: {
                    show: false, //hide legend
                },
                padding: {
                    bottom: 0,
                    top: 0
                },
            });
        }
    })


</script>
</body>

</html>
